<template>
  <!-- hello-scene -->
  <canvas ref="canvasRef"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { WebGLRenderer, Scene, PerspectiveCamera ,AxesHelper} from "three";
import { earthOribit, moonOribit, sunOribit, pointLight } from "./create-scene";
const canvasRef = ref(null);
const nodeArr=[earthOribit, moonOribit,sunOribit]
onMounted(() => {
  // 创建一个渲染器
  const renderer = new WebGLRenderer({ canvas: canvasRef.value });
  // 创建一个镜头：摄像机视锥体垂直视野的角度（从底部到顶部）、摄像机视锥体长宽比、摄像机视锥体近端面，摄像机视锥体远端面
  const camera = new PerspectiveCamera(40, 2, 0.1, 1000);
  camera.position.set(0, 50, 0);
  camera.up.set(0, 0, 1);
  camera.lookAt(0, 0, 0); //正中间
  // 创建一个场景
  const scene = new Scene({ color: 0x111111 });
  scene.add(sunOribit);
  scene.add(pointLight);
  // 往场景里面添加东西——create-scene.js
  renderer.render(scene, camera);
  const render = (time) => {
    time = time * 0.001;
    const canvas = renderer.domElement;//获取canvasDOM结构
    camera.aspect = canvas.clientWidth / canvas.clientHeight; //修改宽高比例
    camera.updateProjectionMatrix(); //通知更新
    // 还有锯齿
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    nodeArr.forEach((item) => {
      item.rotation.y = time;
      const axes=new AxesHelper()
      const material=axes.material
      material.depthTest=false
      material.renderOrder=1
      item.add(axes)
    });
    renderer.render(scene, camera);
    window.requestAnimationFrame(render);
  };
  window.requestAnimationFrame(render);
});
</script>

<style>
canvas {
  display: block;
  width: inherit;
  height: inherit;
}
</style>